<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <span>我是span我在最前面</span>
    <p>我是body的子元素此刻我在最后面</p>
    <script>
        /* 插入节点
        
        
        1. appendChild()

            语法: 
                父节点.appendChild(子节点)
            作用:
                把子节点插入到父节点内容的最后一个位置 



        2. insertBefore()

            语法:
                父节点.insertBefore(子节点,谁的前面);
            作用:
                把子节点插入到父节点内 并且放到指定元素的前面 
        
        
        
        */



        // var divEle = document.createElement('div');

        // document.body.appendChild(divEle)


        // var textNode = document.createTextNode('我是新建的文本节点');

        // divEle.appendChild(textNode)



        // insertBefore()


        var divEle = document.createElement('div');
        var textNode = document.createTextNode('四大火炉 武汉 重庆 济南 南昌');

        divEle.appendChild(textNode);


        // var spanele = document.querySelector('span');
        var pele = document.querySelector('p');



        document.body.insertBefore(divEle,pele);
    </script>
</body>
</html>